<template>
  <view class="tabBar-box">
    <view
      class="tabBar-item"
      v-for="(item, index) in list"
      :key="index"
      @click.native="changeTabBar(index)"
      :class="{ active: defaultTab === index }"
    >
      <image
        :src="defaultTab === index ? item.selectedIconPath : item.iconPath"
      ></image>
      <text>{{ item.text }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
const props = defineProps({
  defaultTab: {
    type: [Number, String],
    default: "",
  },
  list: {
    type: Array,
    required: true,
    default: () => [],
  },
});
let defaultTab = ref(0);

onMounted(() => {
  defaultTab.value = props.defaultTab;
});
const emits = defineEmits(["handelTabBar"]);
const changeTabBar = (index) => {
  defaultTab.value = index;
  emits("handelTabBar", index);
};
</script>

<style lang="scss" scoped>
.tabBar-box {
  width: 626rpx;
  height: 46rpx;
  margin: 0 auto;
  padding: 40rpx 20rpx;
  position: fixed;
  left: 0;
  bottom: 35rpx;
  right: 0;
  z-index: 11;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  border-radius: 999px;
  box-shadow: var(
    --wot-tabbar-box-shadow,
    0 6px 30px 5px rgba(0, 0, 0, 0.05),
    0 16px 24px 2px rgba(0, 0, 0, 0.04),
    0 8px 10px -5px rgba(0, 0, 0, 0.08)
  );
  background-color: #fff;

  .tabBar-item {
    width: 100%;
    flex: 1;
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;

    image {
      width: 42rpx;
      height: 42rpx;
      margin: 5px 0;
    }

    text {
      font-weight: 400;
      font-size: 20rpx;
      color: #8a8c9c;
      line-height: 23rpx;
      text-align: center;
      margin-bottom: 5px;
    }
  }

  .active {
    color: #007dff;
    background: #eef6ff;
    border-radius: 999px;
    border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;

    text {
      color: #007dff;
    }
  }
}
</style>
